<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/discount-coupon.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="near-box">
	<div class="header">
		<a href="personal-center.html" class="left"></a>
		优惠券
	</div>
	<div class="bigbox">
		<div class="coupon-title"> 
			 <span class="coupon-title-text1 tc-picthon" id="one1" onclick="setTab('one',1,3)">未使用</span>
			 <span class="coupon-title-text1" id="one2" onclick="setTab('one',2,3)">已使用</span>
			 <span class="coupon-title-text1" id="one3" onclick="setTab('one',3,3)">已过期</span>
		</div> 
		<div class="coupon-box1" id="con_one_1">
			<!--优惠券主体开始-->
			<div class="coupon-bigbox">
				<div class="coupon-box2">
					<span class="coupon-semicircle1"></span>
					<span class="coupon-semicircle2"></span>
					<span class="coupon-line"></span>
					<!--现金券内容开始-->
	                <div class="coupon-box3">
					    <span class="coupon-text1">有效</span>
					    <span class="coupon-text2">￥300</span>
					    <span class="coupon-text3">满1000.00元使用</span>
					</div>
					<div class="coupon-box4">
						<span class="coupon-text4">母婴跨店满1000减300</span>
						<span class="coupon-text4">全场通用</span>
						<span class="coupon-text5">2017-12-05 12:00:00 到期 <i class="particulars">详情</i></span>
					</div>    
				</div>
				<div class="coupon-box5" style="display: none;">
					<span class="coupon-line2"></span>	
					<span class="coupon-text6">现金券号：565855316</span>
					<span class="coupon-text6">使用时间：2017-11-20 19:25:12至2017-12-20 19:20:00</span>
				</div>
			</div>
            <!--优惠券主体结束-->
            <!--优惠券主体开始-->
			<div class="coupon-bigbox">
				<div class="coupon-box2">
					<span class="coupon-semicircle1"></span>
					<span class="coupon-semicircle2"></span>
					<span class="coupon-line"></span>
					<!--现金券内容开始-->
	                <div class="coupon-box3">
					    <span class="coupon-text1">有效</span>
					    <span class="coupon-text2">￥10</span>
					    <span class="coupon-text3">满100.00元使用</span>
					</div>
					<div class="coupon-box4">
						<span class="coupon-text4">母婴跨店满1000减300</span>
						<span class="coupon-text4">全场通用</span>
						<span class="coupon-text5">2017-12-05 12:00:00 到期 <i class="particulars">详情</i></span>
					</div>    
				</div>
				<div class="coupon-box5" style="display: none;">
					<span class="coupon-line2"></span>	
					<span class="coupon-text6">现金券号：565855316</span>
					<span class="coupon-text6">使用时间：2017-11-20 19:25:12至2017-12-20 19:20:00</span>
				</div>
			</div>
            <!--优惠券主体结束-->
		</div>	
		<div class="coupon-box1" id="con_one_2" style="display: none;">
			<!--优惠券主体开始-->
			<div class="coupon-bigbox">
				<div class="coupon-box2">
					<span class="coupon-semicircle1"></span>
					<span class="coupon-semicircle2"></span>
					<span class="coupon-line"></span>
					<!--现金券内容开始-->
	                <div class="coupon-box3">
					    <span class="coupon-text1">已使用</span>
					    <span class="coupon-text2 tcolor-gray">￥10</span>
					    <span class="coupon-text3">满100.00元使用</span>
					</div>
					<div class="coupon-box4">
						<span class="coupon-text4 tcolor-gray">母婴跨店满1000减300</span>
						<span class="coupon-text4 tcolor-gray">全场通用</span>
						<span class="coupon-text5">2017-12-05 12:00:00 到期 <i class="particulars">详情</i></span>
					</div>    
				</div>
				<div class="coupon-box5" style="display: none;">
					<span class="coupon-line2"></span>	
					<span class="coupon-text6 tcolor-gray">现金券号：565855316</span>
					<span class="coupon-text6 tcolor-gray">使用时间：2017-11-20 19:25:12至2017-12-20 19:20:00</span>
				</div>
			</div>
			<!--优惠券主体结束-->
		</div>
		<div class="coupon-box1" id="con_one_3" style="display: none;">
			<!--优惠券主体开始-->
			<div class="coupon-bigbox">
				<div class="coupon-box2">
					<span class="coupon-semicircle1"></span>
					<span class="coupon-semicircle2"></span>
					<span class="coupon-line"></span>
					<!--现金券内容开始-->
	                <div class="coupon-box3">
					    <span class="coupon-text1">已使用</span>
					    <span class="coupon-text2 tcolor-gray">￥10</span>
					    <span class="coupon-text3">满100.00元使用</span>
					</div>
					<div class="coupon-box4">
						<span class="coupon-text4 tcolor-gray">母婴跨店满1000减300</span>
						<span class="coupon-text4 tcolor-gray">全场通用</span>
						<span class="coupon-text5">2017-12-05 12:00:00 到期 <i class="particulars">详情</i></span>
					</div>    
				</div>
				<div class="coupon-box5" style="display: none;">
					<span class="coupon-line2"></span>	
					<span class="coupon-text6 tcolor-gray">现金券号：565855316</span>
					<span class="coupon-text6 tcolor-gray">使用时间：2017-11-20 19:25:12至2017-12-20 19:20:00</span>
				</div>
			</div>
			<!--优惠券主体结束-->
		</div>
	</div>

</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
function setTab(name,cursel,n){
  for(i=1;i<=n;i++){
      var menu=document.getElementById(name+i);
      var con=document.getElementById("con_"+name+"_"+i);
      menu.className=i==cursel?"tc-picthon coupon-title-text1":"coupon-title-text1";
      con.style.display=i==cursel?"block":"none";
  }
}
 $(".particulars").click(function () {
 	 $(this).parent(".coupon-text5").parent(".coupon-box4")
 	 .parent(".coupon-box2").next(".coupon-box5").toggle();
 	 $(this).parent(".coupon-text5").parent(".coupon-box4")
 	 .parent(".coupon-box2").parent(".coupon-bigbox").toggleClass("h-190");
 	 $(this).parent(".coupon-text5").parent(".coupon-box4")
 	 .parent(".coupon-box2").parent(".coupon-bigbox").siblings(".coupon-bigbox").removeClass("h-190");
 	 $(this).parent(".coupon-text5").parent(".coupon-box4")
 	 .parent(".coupon-box2").parent(".coupon-bigbox").siblings(".coupon-bigbox").find(".coupon-box5").hide("fast");
 });
</script>	
</body>
</html>